<template>
  <div id="Timer">
    <span class="clock">{{ date1 }}</span
    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="week"
      >{{ timer }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ weekDay }}</span
    >
  </div>
</template>

<script setup>
import moment from "moment";
import { ref, reactive, onUnmounted } from "vue";
let interval = ref(null);
let timer = ref("");
let date1 = ref("");
let weekDay = ref("");
function getData() {
  timer.value = moment().format("HH:mm");
  date1.value = moment().format("YYYY-MM-DD");
  var date = new Date();
  var weekDays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  weekDay.value = weekDays[date.getDay()];
}
getData();

interval.value = setInterval(() => {
  timer.value = moment().format("HH:mm");
  date1.value = moment().format("YYYY-MM-DD");
}, 1000);

onUnmounted(() => {
  clearInterval(interval.value);
  interval.value = "";
});
</script>

<style lang="scss" scoped>
#Timer {
  position: absolute;
  top: 70px;
  left: 64px;
  text-align: right;
  color: white;
  z-index: 1;
  font-family: "HuXiaoBo-NanShen";
  // font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  //   line-height: 48px;
  letter-spacing: 2px;
  // text-align: left;
  font-style: normal;
  text-transform: none;
  .clock {
    // font-size: 18px;
  }
  .week {
    // font-size: 12px;
  }
}
</style>